<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<style>

body { background: #444; }


</style>
</head>
<body>

<script src="https://twgljs.org/dist/3.x/twgl.min.js"></script>
<canvas></canvas>


</body>
<script>

const gl = document.querySelector("canvas").getContext("webgl");
const vs = `
attribute vec4 position;
attribute float u;
varying float v_u;
void main() {
  gl_Position = position;
  v_u = u;
}
`;
const fs = `
precision mediump float;
varying float v_u;
uniform float time;
uniform sampler2D tex;
void main() {
  gl_FragColor = texture2D(tex, vec2(fract(v_u + time), 0.5));;
}
`;

// compile shaders, link program, look up uinforms
const programInfo = twgl.createProgramInfo(gl, [vs, fs]);

// make some lines (calls gl.createBuffer, gl.bindBuffer, gl.bufferData 
// for each array)
const bufferInfo = twgl.createBufferInfoFromArrays(gl, {
  position: {
    numComponents: 2,
    data: [ 
      -.5, -.5, 
       .7, -.3,
       .7, -.3,
      -.1,  .8,
      -.1,  .8,
      -.8,  .2,
    ],
  },
  u: {
    numComponents: 1, 
    data: [
      0, 1,  // these numbers define how many times
      0, 2,  // the pattern repeats for each line segment
      0, 3,
    ],
  },
});

// make a simple 16x1 texture
// calls gl.creatTexture, gl.bindTexture, gl.texImage2D, gl.texPamameteri
const texture = twgl.createTexture(gl, {
  height: 1,
  src: [
     0xFF, 0x00, 0x00, 0xFF,
     0xFF, 0x44, 0x00, 0xFF,
     0xFF, 0x88, 0x00, 0xFF,
     0xCC, 0xFF, 0x00, 0xFF,
     0x88, 0xFF, 0x00, 0xFF,
     0x44, 0xFF, 0x00, 0xFF,
     0xCC, 0xFF, 0x00, 0xFF,
     0xCC, 0xFF, 0x00, 0xFF,
     0xCC, 0xFF, 0x44, 0xFF,
     0xCC, 0xFF, 0x88, 0xFF,
     0xCC, 0xFF, 0xCC, 0xFF,
     0xCC, 0xCC, 0xFF, 0xFF,
     0xCC, 0x88, 0xFF, 0xFF,
     0xCC, 0x44, 0xFF, 0xFF,
     0xCC, 0x00, 0xFF, 0xFF,
     0xFF, 0xFF, 0xFF, 0xFF,
  ],
});

function render(time) {
  time *= 0.001; // seconds
  
  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
  gl.clearColor(0, 0, 0, 1);
  gl.clear(gl.COLOR_BUFFER_BIT);
  
  gl.useProgram(programInfo.program);
  
  // calls gl.bindBuffer, gl.enableVertexAttribArray, gl.vertexAttribPointer
  twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
  
  // calls gl.activeTexture, gl.bindTexture, gl.uniformXXX
  twgl.setUniforms(programInfo, { 
    time: -time,
    tex: texture,
  });
  
  // calls gl.drawArrays or gl.drawElements
  twgl.drawBufferInfo(gl, bufferInfo, gl.LINES);
  
  requestAnimationFrame(render);
}
requestAnimationFrame(render);


</script>
